<template>
  <div class="inbound-config-management-container">
    <el-card shadow="never" class="config-card">
      <div class="section-title">基础配置</div>
      <div class="config-section">
        <div class="config-item">
          <el-checkbox v-model="receiveNoRequired"/>
          <span>允许入库数量免输入</span>
          <span class="tip-text">（勾选后，收货单入库数将默认待出预约数量）</span>
        </div>

        <div class="config-item">
          <el-checkbox v-model="allowReceiveExceeded"/>
          <span>允许入库数量超收，收货数量和预计数量偏差范围</span>
          <el-select v-model="overflowRatio" class="select-width" style="margin: 0 10px;">
            <el-option label="百分比" value="百分比"/>
            <el-option label="固定值" value="固定值"/>
          </el-select>
          <el-input v-model="customRatio" class="input-width"/>
          <span class="tip-text">（勾选后，收货单入库数量可录入大于预约数量的百分比或固定数）</span>
        </div>

        <div class="config-item" v-show="false">
          <el-checkbox v-model="allowReceiveNew"/>
          <span>允许入库增加商品</span>
          <span class="tip-text">（勾选后，收货单可在原单基础上新增商品）</span>
        </div>

        <div class="config-item">
          <el-checkbox v-model="enableBatchQuery"/>
          <span>批次过期禁收</span>
          <span class="tip-text">（勾选后，收货单入库批次商品时，若过期时间小于当天日期则提示‘商品过期禁收’）</span>
        </div>
      </div>
    </el-card>
    <el-card shadow="never" class="config-card">
      <div class="section-title">入库推荐</div>
      <div class="config-section">
        <div class="config-item">
          <el-checkbox v-model="recommendLocations"/>
          <span style="display: inline-block;width: 145px">收货单默认入库库位</span>
          <el-select v-model="recommendLocationType" filterable class="select-width">
            <el-option label="请选择" value=""/>
          </el-select>
          <span class="tip-text">（排除次品库位和存储类型库位）</span>
        </div>

        <div class="config-item">
          <el-checkbox v-model="recommendLocations"/>
          <span style="display: inline-block;width: 145px">次品默认库位</span>
          <el-select v-model="defectiveLocation" filterable class="select-width">
            <el-option label="请选择" value=""/>
          </el-select>
          <span class="tip-text">（次品入库推荐指定库位）</span>
        </div>

        <div class="config-item">
          <el-checkbox v-model="recommendLocations"/>
          <span style="display: inline-block;width: 145px">入库单推荐库位</span>
          <el-select v-model="brandLocation" class="select-width">
            <el-option label="请选择" value=""/>
            <el-option label="空货位" value="空货位"/>
            <el-option label="上次上架货位" value="上次上架货位"/>
            <el-option label="同品集中存放" value="同品集中存放"/>
            <el-option label="优先货位" value="优先货位"/>
          </el-select>
          <el-tooltip
              class="box-item"
              effect="dark"
              content="Right Bottom prompts info"
              placement="right-end"
          >
            <template #content>
              <div>空货位（不推荐库位）</div>
              <div>上次上架库位（正次品分开，若首次上架则为空）</div>
              <div>同品集中存放（存放商品上次货位附近最近货位）</div>
              <div>优先库位（商品在货位界面设置优先，按所在货位进行推荐，未设置为空）</div>
            </template>
            <el-icon class="icon-warning">
              <WarningFilled/>
            </el-icon>
          </el-tooltip>
        </div>
      </div>
    </el-card>
    <el-card shadow="never" class="config-card">
      <div class="section-title">自定义收货字段</div>
      <div class="config-section">
        <el-row :gutter="10">
          <el-col v-for="(field, index) in customFields" :key="index" :lg="12" :sm="24">
            <div class="config-item">
              <span style="display: inline-block;max-width: 110px;min-width: 100px">自定义字段{{ index + 1 }}</span>
              <el-input v-model="field.name" class="field-input" style="margin-left: 0"/>
              <span style="padding-right: 8px;white-space: nowrap;">格式</span>
              <el-select v-model="field.type" class="select-width">
                <el-option label="文本" value="text"/>
                <el-option label="数字" value="number"/>
                <el-option label="时间" value="datetime"/>
              </el-select>
              <el-checkbox style="padding-left: 8px" v-model="field.enabled">启用</el-checkbox>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <div class="action-footer">
      <el-button type="primary" @click="saveConfig">保存</el-button>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {WarningFilled} from '@element-plus/icons-vue'

// 基本配置
const receiveNoRequired = ref(false)
const allowReceiveExceeded = ref(false)
const overflowRatio = ref('') //选择单位
const customRatio = ref('')
const allowReceiveNew = ref(false)
const enableBatchQuery = ref(false)

// 入库推荐
const recommendLocations = ref(false)
const recommendLocationType = ref('')
const defectiveLocation = ref('')
const brandLocation = ref('')

// 自定义字段
const customFields = ref([
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
])

// 保存配置
const saveConfig = () => {
  console.log('保存入库配置')
  // 实际保存逻辑
}
</script>

<style lang="scss" scoped>
.inbound-config-management-container {
  padding: 0;
  max-height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;

  .config-card {
    position: relative;
    flex: 1;
    margin: 20px 0 10px 0;
    overflow: visible;

    .section-title {
      position: absolute;
      top: -15px;
      font-size: var(--el-font-size-medium);
      font-weight: bold;
      background-color: #ffffff;
      height: 30px;
      line-height: 30px;
      padding: 0 7px;
    }

    .config-section {
      font-size: var(--el-font-size-base);

      .config-item {
        margin: 10px 0;
        display: flex;
        align-items: center;

        .el-checkbox {
          padding-right: 8px;
        }

        .select-width {
          width: 150px;
        }

        .input-width {
          width: 150px;
        }
      }
    }
  }


  .field-input {
    width: 180px;
    margin: 0 10px;
  }

  .tip-text {
    font-size: var(--el-font-size-base);
    color: #3373CA;
  }

  .icon-warning {
    color: #F56C6C;
    font-size: var(--el-font-size-medium);
    margin-left: 5px;
    cursor: pointer;
    position: relative;
  }

  .action-footer {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}
</style> 